<template>
    <div id="bg">
        <el-row>

            <el-col>
                <section class="left">
                    
                </section>
                <section class="right">
                    <div class="logo">

                    </div>
                    <h3 class="title">欢迎登录管理后台</h3>

                    <el-form  :model="loginForm" :rules="rules" ref="fromIns">
                        <el-form-item  prop="username">
                            <el-input placeholder="请输入您的账号" v-model="loginForm.username"></el-input>
                        </el-form-item>
                        <el-form-item  prop="password">
                            <el-input placeholder="请输入您的密码" type="password" v-model="loginForm.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleLogin">登录</el-button>
                        </el-form-item>
                    </el-form>
                </section>

            </el-col>
        </el-row>

    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import type { FormRules, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { login, } from "@/api/api"
import { useRouter } from 'vue-router';
import { useRouteStore } from '@/stores/routeStores';
const store = useRouteStore();
const routeArr = [
    {
        path: "password",
        component: () => import("@/views/Password.vue"),
        meta: { label: "密码管理" }
    },
    
    {
        path: 'role',
        component: () => import("@/views/role.vue"),
        meta: { label: "角色管理" }
    },
    {
        path: 'manager',
        component: () => import("@/views/Manager.vue"),
        meta: { label: "成员管理" }
    },
    
    {
        path: 'menu',
        component: () => import("@/views/Menu.vue"),
        meta: { label: "密码管理" }
    },
    {
        path: 'Banner',
        component: () => import("@/views/Banner.vue"),
        meta: { label: "轮播管理" }
    },
]
const router = useRouter();
const loginForm = reactive<LoginForm>({
    username: "",
    password: ""
})
const rules: FormRules = {
    username: {
        required: true,
        message: "请输入用户名",
        trigger: "blur"
    },
    password: {
        required: true,
        message: "请输入密码",
        trigger: "blur"
    }
}
const formIns = ref<FormInstance>();
const handleLogin = async () => {
    try {
        await formIns.value?.validate();
        const res = await login(loginForm);
        if (res.data.code == 200) {
            ElMessage.success("成功")
            sessionStorage.setItem("login", "yes")
            sessionStorage.setItem("userid", String(res.data.id))
            await store.addRoutes(res.data.rid)

            router.push({ path: "/main" })
        } else {
            ElMessage.success("失败")

        }
    } catch (e) {
        console.log(e);
    }
}
onMounted(async () => {

})
</script>
<style scoped>
#bg {
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.el-row {
    height: 30vh;
    justify-content: center;
    position: relative;
    top: 30px;
}

.el-col {
    flex-basis: 1534px;
    height: 872px;
    margin-top: 25px;
    background-color:#fff;
}

.title {
    text-align: center;
    color: #ED9F31;
    font-size: 38px;
}

.el-form {
    margin: 0 30px;
}
.left{
    width: 818px;
    height: 872px;
    float: left;
    background-image: url("../assets/image 35.png");
    background-size: cover;
}
.right{
    width: 716px;
    height: 872px;
    float: right;
}
.logo{
    background-image: url("../assets/Group 491.png");
    width: 265px;
    height: 128px;
    margin-top: 74px;
    margin-left: 232px;
}
.el-form-item:deep(.el-input__wrapper){
    box-shadow: none;
    border-bottom:1px solid #f1f1f1;
}
.el-form-item:deep(.is-focus){
    box-shadow: none;
    border-bottom:1px solid var(--el-color-danger);
}
</style>